<template>
    <div>
        {{foo}}
        {{bar}}
    </div>
</template>

<script>
import { reactive, isReactive, toRefs} from 'vue'
function useFeatureX() {
    const state = reactive({
        foo: 1,
        bar: 2
    })
    return toRefs(state)
}
export default {
    setup() {
        const { foo, bar } = useFeatureX();
        return {
            foo,
            bar
        }
    }
}
</script>
